import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { routerRedux,Link } from 'dva/router';
import queryString from 'query-string';
import ModalComponent from './../../../components/Modal/Modal';
import FilterComponent from './../../../components/Filter/index';
import ListComponent from './../../../components/List/List';
import ButtonGroup from './../../../components/ButtonGroup/ButtonGroup';
import { Modal } from 'antd';
const confirm = Modal.confirm;


const User = ({ location, dispatch, user, loading }) => {
    location.query = queryString.parse(location.search);
    const { query,pathname } = location;
    const { list, pagination, currentItem, modalVisible, modalType } = user;
    const { pageSize } = pagination;

    //配置modal的属性参数
    const ModalColumn = [
        {
            label: 'Name',
            filed: 'name',
            type: 'Input',
            isSelect: false,
            placeholder: 'Please input your name',
            rules: [{required: true}]
        }, {
            label: 'NickName',
            filed: 'nickName',
            type: 'Input',
            isSelect: false,
            placeholder: 'Please input your nickname',
            rules: [{required: true}]
        }, {
            label: 'Age',
            filed: 'age',
            type: 'InputNumber',
            isSelect: false,
            placeholder: 'Please input your age',
            rules: [{required: true}]
        }, {
            label: 'E-mail',
            filed: 'email',
            type: 'InputNumber',
            isSelect: false,
            placeholder: 'Please input your E-mail',
            rules: [{required: true}]
        }, {
            label: 'Phone',
            filed: 'phone',
            type: 'Input',
            isSelect: false,
            placeholder: 'Please input your phone',
            rules: [{required: true}]
        },{
            label: 'Address',
            filed: 'address',
            type: 'Input',
            isSelect: false,
            placeholder: 'Please input your address',
            rules: [{required: true}]
        }
    ];
    const ModalProps = {
        formData:ModalColumn,
        item: modalType === 'create' ? {} : currentItem,
        visible: modalVisible,
        maskClosable: false,
        confirmLoading: loading.effects['user/update'],
        title: `${modalType === 'create' ? 'Create A New User' : 'Update The User Information'}`,
        onCreate (values) {
            if(modalType === 'create'){
                dispatch({
                    type: 'user/create',
                    payload: values,
                })
            } else {
                dispatch({
                    type: 'user/update',
                    payload: values,
                })
            }
        },
        onCancel () {
            dispatch({
                type: 'user/hideModal',
            })
        },
    };

    //配置筛选框的属性参数
    const SearchColumn = [
        {
            label: '姓名',
            filed: 'name',
            type: 'Input',
            isSelect: false,
            placeholder: '填写姓名',
        }, {
            label: '年龄',
            filed: 'age',
            type: 'InputNumber',
            isSelect: false,
            placeholder: '填写年龄',
        }, {
            label: '电话',
            filed: 'phone',
            type: 'Input',
            isSelect: false,
            placeholder: '填写电话',
        }];
    const FilterProps = {
        filter: {
            ...query
        },
        dataSource: SearchColumn,
        total: SearchColumn.length,   //总共有多少筛选条件
        showNumber: 6,  //可以展示的条件
        colNumber: 4,   //每一行显示的条件数
        formItemLayout: {  //一个搜索框的文字和框所占的比例
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 18 },
            },
        },
        onSubmit(value){
            dispatch(routerRedux.push({
                pathname: location.pathname,
                search: queryString.stringify({
                    ...value,
                    page: 1,
                    pageSize,
                }),
            }))
        }
    };

    //配置list的属性参数
    const pageChangeHandle = (page,pageSize) => {
        dispatch(routerRedux.push({
            pathname,
            search: queryString.stringify({
                ...query,
                page: page,
                pageSize: pageSize,
            }),
        }))
    };
    const tableProps = {
        dataSource: list,
        loading: loading.effects['user/query'],
        bordered: true,
        size: 'small',
        pagination: {
            total: pagination.total,
            current: pagination.current,
            pageSize: pagination.pageSize,
            showSizeChanger: true,
            onChange: pageChangeHandle,
            onShowSizeChange: pageChangeHandle,
        },
        rowKey(record){
            return record.id;
        }
    };
    const DropProps = {
        showTitle: '操作',
        menuList:[{
            key: 'edit',
            IconType: 'edit',
            title: '编辑'
        },{
            key: 'delete',
            IconType: 'close',
            title: '删除'
        }],
        handleMenuClick(ID,type){
            switch (type){
                case 'edit':
                    dispatch({ type: 'user/get', payload: { id: ID } });
                    break;
                case 'delete':
                    confirm({
                        title: 'Are you sure delete this record?',
                        onOk () {
                            dispatch({ type: 'user/delete', payload: { id: ID } })
                        },
                    });
                    break;
                default:
                    return;
            }
        }
    };
    const columnProps = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
            width: 180,
            fixed: 'left',
            render: (text,record) => <Link to={`user/${record.id}`}>{text}</Link>,
        }, {
            title: 'NickName',
            dataIndex: 'nickName',
            key: 'nickName',
        }, {
            title: 'Age',
            dataIndex: 'age',
            key: 'age',
        }, {
            title: 'Email',
            dataIndex: 'email',
            key: 'email',
        }, {
            title: 'Phone',
            dataIndex: 'phone',
            key: 'phone',
        }, {
            title: 'Address',
            dataIndex: 'address',
            key: 'address',
        }, {
            title: 'Operation',
            key: 'operation',
            width: 100,
            fixed: 'right',
        }];

    //配置列表Toolbar的参数
    const ToolbarProps = {
        authority: 1,
        onAdd: function(){
            dispatch({ type: 'user/showModal' })
        },
    };

    return (
        <div style={{padding: 20,margin: 0}}>
            <FilterComponent {...FilterProps}/>
            <ButtonGroup {...ToolbarProps} />
            <ListComponent tableProps={tableProps} columnProps={columnProps} DropProps={DropProps} />
            { modalVisible && <ModalComponent {...ModalProps}/> }
        </div>
    )
};

User.propTypes = {
    user: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    loading: PropTypes.object.isRequired,
};

export default connect(({ user, loading }) => ({ user, loading }))(User)
